<template>
  <div class="Movie">
   
    <ul class="music-list">
      <li v-for="(movie, index) in showlist" :key="movie.id + index"  >
      
        <!-- 内容部分 -->
        <div class="content">
          <!-- 左边详情 -->
          <div class="left">
            <div class="name">
              {{ movie.movies.alias }}
            </div>
            <!-- 第二行图片 -->
            <div class="img">
              <a :href="movie.movies.url"
                ><img :src="movie.movies.img" alt="error"
              /></a>
              <div class="wish">{{ movie.movies.num + "人想看" }}</div>
            </div>
          </div>

          <div class="right">
            <button class="button" @click="buy(index)" value="购买">
              购买
            </button>
            <span class="date">{{ movie.movies.date }}</span>
          </div>
          <hr />
        </div>   
      </li> 
   <div class="loadMore" ref="loadMore">加载更多</div>
    </ul>
    <!-- 最后一个元素 -->
   
  </div>
</template>

<script>
export default {
  name: "Movie",
  
  
  data() {
    return {
      Movielist: [],
      loading: null,
      page: 1,
    };
  },

  methods: {
    // 把电影的数据请求封装成函数
    getMovie() {
      this.axios.get("/mostExpected.json").then((res) => {
        console.log(res);
        // 把需要渲染的数据抽取出来，赋值给本地变量
        this.Movielist = res.data.coming.map((item) => {
          // console.log(index, item)
          item.movies = {
            // 在对象里创建一个movies属性对象
            alias: item.nm, // 电影名
            date: item.comingTitle,//
            img: item.img,//图片
            num: item.wish,//想看的人数
            url: item.url,//路径
            alt: item.alt,//图片失败时展示的文字
            // 图片
          };
          console.log("item" + item.movies.img);
          return item;
        });

        console.log("movielist" + this.Movielist);
      });
    },
    //触底刷新
    windowScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
       console.log(scrollTop);
      let clientHeight = window.innerHeight;
      console.log(clientHeight);
      let lastElementTop = this.$refs.loadMore.offsetTop;

      let lastElementHeight = this.$refs.loadMore.clientHeight;

      if (scrollTop + clientHeight >= lastElementTop + lastElementHeight ) {
        this.loading =scrollTop + clientHeight >= lastElementTop + lastElementHeight ;
        console.log("刚刚好触底", this.loading);
      }
      if (this.loading == true) {
        this.loading = false;
        this.loadMore();
      }
    },

    loadMore() {
      setTimeout(() => {
        this.page++;
        this.loading = false;
        console.log("加载更多");
      }, 1000);
    },
    //买票
    buy(index) {
      var i = prompt("请输入你要购买的票数");
      if (i == null) {
        alert("取消成功");
      } else if (i == "") {
        alert("请选择票数");
      } else if (isNaN(parseFloat(i))) {
        alert("请输入数字");
      } else {
        console.log(parseInt(i));
        alert(
          "您购买了" +
            i +
            "张" +
            "《" +
            this.Movielist[index].movies.alias +
            "》" +
            "电影票"
        );
      
      }
      
    },
  },
    computed: {
    showlist(){
      let end = this.page * 5;
      console.log(this.Movielist.slice(0,end));
      return this.Movielist.slice(0, end);
    },
   },

  created() {
    //  console.log(this.axios);
    this.getMovie();
   
  },
  mounted() {
    // console.log("mounted")
    // 因为滚动事件需要出现滚动条才能触发，其实就是让页面渲染完成才能进行
    // 因此在生命周期mounted中给其进行滚动事件监听是最好
    window.addEventListener("scroll", this.windowScroll);
  },

  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
};
</script>
<style lang="less" scoped>
.Movie {
  width: 100%;

  .type {
    display: flex;

    justify-content: space-between;
    margin-top: 60px;
    span {
      font-size: 36px;
    }
  }
  .movie-list {
    padding-inline-start: 0%;
    
    li {
      display: flex;
      position: relative;

      .num {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        flex: 0 0 40px;
        font-size: 26px;
        color: #999;
        margin-bottom: 150px;
      }
    }
    .content {
      flex: 1 1 auto;
      display: flex;
    }
    .left {
    }
  }
  li:first-of-type {
    margin-top: -40px;
  }
}
button.button {
  border-radius: 60px;
  display: flex;
  justify-content: space-between;
  margin-top: -70px;
  margin-left: 300px;
  position: absolute;
  width: 50px;
  text-align: center;
}

hr {
  font-size: 1px;
}
i.num {
  font-size: 20px;
}
.name {
  // 可以控制显示多少行内容

  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  margin-left: 150px;
}
.date {
  position: absolute;
  margin-left: 150px;
  margin-top: -150px;
  font-size: 25px;
}
img {
  width: 140px;
  height: 120px;
  position: relative;
}
.wish {
  margin: 0;
  width: 160px;
  font-size: 20px;
  margin-left: 240px;
  margin-bottom:20px ;
  color: red;
}
</style>
